/* style */

img{display:block;width:100%;height:auto;}
.drag-box{width:50%;height:500px;background-color:#3bb3e0;margin:0 auto 50px;
    /*border:1px solid #2561b4;*/
}
.drag{
    width: 57px;
    font-weight: 700;
    height: 64px;
    color: #fff;
    line-height: 29px;
    background: url(../images/guo.png) no-repeat;
    background-size: 100% 100%;
    z-index: 2;
    font-size: 12px;
    text-align: center;
}

.handler{background:#333;color:#fff;text-align:center;font-size:12px;line-height:20px;}

.drag.drag-1{width:150px;height:150px;top:100px;}

.drag-box.drag-box-2{height:600px;}
.drag.drag-2{width:150px;height:150px;left:50%;margin-left:-75px;}

.drag.drag-4{width:150px;height:170px;}


.drag-box.drag-box-5{width:80%;margin:0 auto 0;background: url(../images/shu.png) no-repeat;background-size: 100% 100%;}
.test{position:relative;width:68%;margin:0 auto 0;height:648px;padding:50px 0;
    /*background-color:#ddd;*/
    margin:0 auto 100px;
    /*border:1px solid #aaa;*/
}
.test i{display:block;position:absolute;top:10px;left:10px;}


.log{width:50%;height:75px;line-height:25px;margin:0 auto 20px;font-size:16px;color:#333;}
.log span{color:#cb0000;}

/* 当点击拖动时，保证当前元素处于前端 */
.drag.on{z-index:9;}

.guolan{
    position: relative;
    background: url(../images/guolan.png) no-repeat;
    background-size: 100% 100%;
    width: 30%;
    float: left;
    height: 138px;
}
.guolan p{
    position: absolute;
    bottom: 0;
    font-weight: 700;
    left: 40%;
    font-size: 18px;

}
.gulanbox{
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 43px;
    z-index: 1;

}